<template>
  <view class="order_detail">
    <!-- #ifndef MP-WEIXIN -->
    <my-navbar
      title="退货单详情"
      leftText=""
      @leftClick="leftClick"
      background="#FFFFFFF"
      height="100"
    ></my-navbar>
    <!-- #endif -->

    <view class="order_info">
      <view class="order_info-box">
        <span class="order_info-box-title"
          >退货单号：{{ orderInfo.order_sn }}</span
        >
        <div class="line"></div>
        <div
          class="subitem flex-row-between"
          :style="{ alignItems: item.alignItems }"
          v-for="(item, index) in orderList"
          :key="index"
        >
          <span class="subitem-left">{{ item.name }}:</span>
          <span
            class="subitem-right flex-rowReverse-end"
            :style="{ color: item.color || '#666666' }"
            >{{
              item.name == "单据状态"
                ? orderInfo[item.value]
                : orderInfo[item.value]
            }}</span
          >
        </div>
      </view>
      <view class="order_info-box">
        <span class="order_info-box-title" style="font-size: 30rpx"
          >金额信息</span
        >
        <div class="subitem flex-row-between">
          <span class="subitem-left">申请金额:</span>
          <span class="subitem-right flex-rowReverse-end" style="color: #f55726"
            >5.5</span
          >
        </div>
        <div class="subitem flex-row-between">
          <span class="subitem-left">申请金额:</span>
          <span class="subitem-right flex-rowReverse-end" style="color: #f55726"
            >5.5</span
          >
        </div>
      </view>
      <view class="order_info-box">
        <span class="order_info-box-title" style="font-size: 30rpx"
          >商品信息</span
        >
        <div class="order_info-shop flex-row-start">
          <div class="order_info-shop-image"></div>
          <span class="order_info-shop-title">胡萝卜</span>
        </div>
        <div class="order_info-shopInfo flex-row-start">
          <div class="order_info-shopInfo-box">
            <div>申请数量： 1</div>
          </div>
          <div class="order_info-shopInfo-box">
            <div>实退数量： 1</div>
          </div>
        </div>
        <div class="order_info-shopInfo flex-row-start">
          <div class="order_info-shopInfo-box">
            <div>申请单价： 1</div>
          </div>
          <div class="order_info-shopInfo-box">
            <div>实退单价： 1</div>
          </div>
        </div>
        <div class="order_info-shopInfo flex-row-start">
          <div class="order_info-shopInfo-box">
            <div>申请金额： 1</div>
          </div>
          <div class="order_info-shopInfo-box">
            <div>实退金额： 1</div>
          </div>
        </div>
        <div class="order_info-shopInfo flex-row-start">
          <div class="order_info-shopInfo-box">
            <div>
              备注：<span class="contents"
                >阿萨撒旦撒旦撒旦阿萨撒旦撒旦撒旦阿萨撒旦撒旦撒旦阿萨撒旦撒旦撒旦阿萨撒旦撒旦撒旦阿萨撒旦撒旦撒旦阿萨撒旦撒旦撒旦阿萨撒旦撒旦撒旦</span
              >
            </div>
          </div>
        </div>
      </view>
      <!-- <view class="pay">
        <view>
          <text class="title">基础信息</text>
          <text class="red_font" v-if="orderInfo.pay_status==0">未支付</text>
					<text class="dgreen" v-else-if="orderInfo.order_status==0">待审核</text>
					<text class="dgreen" v-else-if="orderInfo.order_status==1">备货中</text>
					<text class="dgreen" v-else-if="orderInfo.order_status==2">配送中</text>
					<text class="dgreen" v-else-if="orderInfo.order_status==3">已收货</text>
					<text class="gray_font" v-else-if="orderInfo.order_status==4">已取消</text>
        </view>
        <view
          ><text>退货单号</text><text>{{ orderInfo.order_sn }}</text></view
        >
        <view
          ><text>单据状态</text>
          <text v-if="orderInfo.status == 0">待审核</text>
          <text v-else-if="orderInfo.status == 3">已完成</text>
          <text v-else-if="orderInfo.status == 4">已取消</text>
          <text v-else>待退款</text>
        </view>
        <view
          ><text>退货原因</text><text>{{ orderInfo.return_remark }}</text></view
        >
        <view
          ><text>申请日期</text><text>{{ orderInfo.createdTime }}</text></view
        >
        <view
          ><text>审核日期</text><text>{{ orderInfo.checkTime }}</text></view
        >
        <view
          ><text>关联订单</text
          ><text>{{ orderInfo.related_order_sn }}</text></view
        >
        <view
          ><text>订单配送日期</text
          ><text>{{ orderInfo.orderSendTime }}</text></view
        >
        <view
          ><text>取消原因</text><text>{{ orderInfo.reject_remark }}</text></view
        >
      </view>
      <view class="money">
        <view><text class="title">金额信息</text></view>
        <view
          ><text>申请金额</text
          ><text class="red_font"
            >￥{{ Number(orderInfo.apply_money).toFixed(2) }}</text
          ></view
        >
        <view
          ><text>实退金额</text
          ><text class="red_font"
            >￥{{ Number(orderInfo.real_money).toFixed(2) }}</text
          ></view
        >
      </view> -->
      <!-- <view class="good_info">
        <view class="title"> 商品信息 </view>
        <view class="sign_good" v-for="(item, index) in goodsList" :key="index">
          <view class="flex-middle top">
            <view class="imgs flex-middle">
              <img class="img" :src="item.img" mode="aspectFit" alt="" /> -->
      <!-- <image class="logo" v-if="showLogo==1" :src="logo" mode="aspectFit"></image> -->
      <!-- </view>
            <text class="name">{{ item.goods_name }}</text> -->
      <!-- <text class="spu">{{item.spu_name}}</text> -->
      <!-- </view>
          <view class="row">
            <text>申请数量：{{ Number(item.apply_num) }}</text>
            <text
              >实退数量：{{
                orderInfo.status == 2 || orderInfo.status == 3
                  ? Number(item.real_num)
                  : 0
              }}</text
            >
          </view>
          <view class="row">
            <text v-show="canshowprice"
              >申请单价：￥{{ Number(item.apply_price).toFixed(2) }}</text
            >
            <text v-show="canshowprice"
              >实退单价：￥{{
                orderInfo.status == 2 || orderInfo.status == 3
                  ? Number(item.real_price).toFixed(2)
                  : "0.00"
              }}</text
            >
          </view>
          <view class="row">
            <text>申请金额：￥{{ Number(item.apply_money).toFixed(2) }}</text>
            <text
              >实退金额：￥{{
                orderInfo.status == 2 || orderInfo.status == 3
                  ? Number(item.real_money).toFixed(2)
                  : "0.00"
              }}</text
            >
          </view>
          <view
            >备注：<text class="note">{{ item.remark }}</text></view
          >
        </view>
      </view> -->
    </view>
  </view>
</template>

<script>
import { $https } from "@/static/js/request.js";
import MixinShowprice from "@/static/js/mixinshowprice.js";
export default {
  data() {
    return {
      logo: "",
      showLogo: 0,
      orderInfo: {}, //订单信息
      goodsList: [], //商品列表

      orderList: [
        {
          name: "单据状态",
          value: "status",
          color: "#F55726",
          alignItems: "center",
        },
        {
          name: "退货原因",
          value:
            "啊十大建设卢卡斯啊十大建设卢卡斯啊十大建设卢卡斯啊十大建设卢卡斯啊十大建设卢卡斯啊十大建设卢卡斯啊十大建设卢卡斯啊十大建设卢卡斯啊十大建设卢卡斯",
          alignItems: "flex-start",
        },
        {
          name: "申请日期",
          value: "dasdas",
          alignItems: "center",
        },
        {
          name: "审核日期",
          value: "dasdasd",
          alignItems: "center",
        },
        {
          name: "关联订单",
          value: "asdasd",
          alignItems: "center",
        },
        {
          name: "订单配送日期",
          value: "",
          alignItems: "center",
        },
        {
          name: "取消原因",
          value:
            "啊十大建设卢卡斯啊十大建设卢卡斯啊十大建设卢卡斯啊十大建设卢卡斯啊十大建设卢卡斯啊十大建设卢卡斯啊十大建设卢卡斯啊十大建设卢卡斯啊十大建设卢卡斯啊飒飒",
          alignItems: "flex-start",
        },
      ],
    };
  },
  mixins: [MixinShowprice],
  onReady() {
    getApp().setTitle();
  },
  onLoad(option) {
    this.getData(option.id);
    this.logo = uni.getStorageSync("logo");
    this.showLogo = uni.getStorageSync("showLogo");
  },
  methods: {
    getData(id) {
      $https("GET", "orderReturnDetail", { id: id }, (res) => {
        var info = res.data.data.order_info;
        var ms1 = Number(info.created_at + "000");
        info.createdTime = this.timestampToDate(ms1);
        //可能为0
        if (info.check_time) {
          var ms2 = Number(info.check_time + "000");
          info.checkTime = this.timestampToDate(ms2);
        }
        if (info.order_send_time) {
          var ms3 = Number(info.order_send_time + "000");
          info.orderSendTime = this.timestampToDate(ms3);
        }
        this.orderInfo = info;
        this.goodsList = res.data.data.goods_info;
      });
    },
    timestampToDate(ms) {
      var now = new Date();
      now.setTime(ms);
      var date =
        now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
      return date;
    },
    leftClick() {
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/static/scss/index.scss";
.order_info {
  width: 100%;
  padding: 20rpx 30rpx;

  &-box {
    width: 100%;
    background: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    &-title {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    .line {
      width: 100%;
      height: 1rpx;
      background: #ececec;
      margin-top: 30rpx;
    }
    .subitem {
      // align-items: center;
      margin-top: 10rpx;
      &-left {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        width: 180rpx;
        line-height: 40rpx;
      }
      &-right {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        width: calc(100% - 180rpx);
        line-height: 40rpx;
        text-align: justify;
      }
    }
  }
  &-shop {
    width: 100%;
    margin-top: 20rpx;
    &-image {
      width: 130rpx;
      height: 130rpx;
      border-radius: 16rpx;
      background: red;
    }
    &-title {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      margin-left: 30rpx;
      margin-top: 15rpx;
    }
  }
  &-shopInfo {
    align-items: center;
    margin-top: 20rpx;
    width: 100%;
    &-box {
      flex: 1;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      .contents {
        color: #666666;
      }
    }
  }
  // .prop {
  //   white-space: nowrap;
  //   margin-right: 20rpx;
  // }

  // .pay > view,
  // .money > view {
  //   margin-top: 20rpx;
  // }

  // .gray_font {
  //   color: gray;
  // }
}

// .order_detail {
//   .pay > view,
//   .money > view {
//     display: flex;
//     justify-content: space-between;
//   }

//   .pay,
//   .money {
//     border-bottom: 1px solid #e8e9e9;
//     padding: 10rpx 0 18rpx;
//   }

//   .pay > view:nth-child(n + 2) text:last-child {
//     color: gray;
//   }

//   .good_info {
//     padding-top: 25rpx;
//   }

//   .title {
//     font-size: 32rpx;
//     font-weight: bold;
//   }
// }

// .good_info {
//   padding-bottom: 40rpx;

//   .title {
//     margin-bottom: 14rpx;
//   }

//   .sign_good {
//     font-size: 24rpx;
//     background: #fff;
//     border-radius: 14rpx;
//     padding: 20rpx 40rpx;
//     margin-top: 20rpx;

//     + .sign_good {
//       margin-top: 20rpx;
//     }

//     .top {
//       margin-bottom: 20rpx;

//       .imgs {
//         width: 120rpx;
//         height: 120rpx;
//         position: relative;

//         .logo {
//           width: 40rpx;
//           height: 40rpx;
//           position: absolute;
//           top: 0;
//           left: 0;
//           z-index: 1;
//         }

//         .img {
//           width: 120rpx;
//           max-height: 100rpx;
//           margin-right: 40rpx;
//         }
//       }

//       .name {
//         margin-left: 20rpx;
//       }
//     }

//     .row {
//       margin-bottom: 20rpx;

//       text:first-child {
//         display: inline-block;
//         width: 60%;
//       }
//     }

//     .note {
//       color: #9a9a9a;
//     }

//     .spu {
//       margin-left: 20rpx;
//       padding: 4rpx 8rpx;
//       background: #f5f5f5;
//       border-radius: 8rpx;
//       font-size: 24rpx;
//       transform: scale(0.8);
//     }
//   }
// }
</style>
